<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Nested Layout - jQuery EasyUI Demo</title>
	<%@ include file="/static/common/common.jspf"%>
	<style type="text/css">
		.menu_child:hover {
		    background-color: #76b3ec;
		    cursor: pointer;
		    color: white;
		}
		.menu_child{
			padding: 8px;
    		position: relative;
		}
		a{
			color : white;
		}
	</style>
	<script type="text/javascript">
		$(function(){
			$('.menu_child div:nth-child(2)').on('click', function (){
				console.log("左侧菜单被点击");
				if ($('#m_tabs').tabs('exists', $(this).text())) {
					$('#m_tabs').tabs('select', $(this).text());//选中并刷新
				}else {
					var tab_iframe = $('<iframe id="myframe" width="100%" height="100%" frameBorder="0" src="'+
							$(this).attr("data-url")+'" scrolling="no"></iframe>');
					var tab_context = $('<div style="height:100%;"></div>');
					tab_context.append(tab_iframe);
		        	$('#m_tabs').tabs('add',{
						title: $(this).text(),
						content: tab_context,
						closable: true
					});
				}
			})
		})
	</script>
</head>
<body class="easyui-layout">
	<div data-options="region:'north', border:true" style="height:60px; 
		background: url(${ctx}/static/image/head2.jpg);background-repeat:no-repeat; 
		background-size:100% 100%;-moz-background-size:100% 100%;">
		<span style="font-size: 20px;color: white;position: relative;top: 30%;left: 25px;">权限管理系统</span>
		<ul style="float: right; color: white; margin-right: 30px; margin-top: 20px;">
			<a>${user.username}, 欢迎您</a> 
			<a href="${ctx}/">注销</a>
		</ul>
	</div>
	<div data-options="region:'west', split:true, title:'导航菜单', collapsible:false" style="width:200px">
		<div class="easyui-accordion" data-options="fit: true, collapsible:true, collapsed:true">
			<!-- 后期将下面内容改为动态的即可 -->
			<div title="系统管理" iconCls="icon-2012080404391">
				<div class="menu_child" style="padding: 8px;">
					<div class="panel-icon icon-user" style="margin-left: 18px;"></div>
					<div style="padding-left: 36px;" data-url="${ctx}/user/list">用户管理</div>
				</div>
				<div class="menu_child" style="padding: 8px;">
					<div class="panel-icon icon-group" style="margin-left: 18px;"></div>
					<div style="padding-left: 36px;" data-url="">角色管理</div>
				</div>	
				<div class="menu_child" style="padding: 8px;">
					<div class="panel-icon icon-application_view_list" style="margin-left: 18px;"></div>
					<div style="padding-left: 36px;" data-url="">菜单管理</div>
				</div>
			</div>
			<div title="系统管理" iconCls="icon-2012080404391">
				<div class="menu_child" style="padding: 8px;">
					<div class="panel-icon icon-user" style="margin-left: 18px;"></div>
					<div style="padding-left: 36px;" data-url="${ctx}/user/list">用户管理</div>
				</div>
				<div class="menu_child" style="padding: 8px;">
					<div class="panel-icon icon-group" style="margin-left: 18px;"></div>
					<div style="padding-left: 36px;" data-url="">角色管理</div>
				</div>	
				<div class="menu_child" style="padding: 8px;">
					<div class="panel-icon icon-application_view_list" style="margin-left: 18px;"></div>
					<div style="padding-left: 36px;" data-url="">菜单管理</div>
				</div>
			</div>
		</div>
	</div>
	<div data-options="region:'center'">
		<div class="easyui-tabs" id="m_tabs" style="width:100%; height:100%;"></div>
	</div>	
	<div data-options="region:'south', split:true, border:true" style="height:50px;padding:10px;">
		<div style="text-align: center">Copyright © 2018 Adobe Systems Incorporated. All rights reserved.</div>
	</div>
</body>
</html>